
<template>
	<view class="content">
		<view class="announce-row">
			<view style="width: 56rpx">
				<image class="announce-icon" src="./notice.png"></image>
			</view>
			<marque :noticeContent=noticeContent :xTime=xTime :textColor=textColor></marque>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import marque from './marque.vue'
	Vue.component('marque', marque)
	export default {
		props: {
			noticeContent: {
				type: String,
				default: ''
			},
			xTime: {
				type: Number,
				default: 15
			},
			textColor: {
				type: String,
				default: ''
			}
		},
		data() {
			return {}
		},
		onLoad() {},
		methods: {}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.announce-row {
		background: #E1E7F5;
		width: 92%;
		height: 56rpx;

padding: 6rpx;
		margin-left: auto;
		margin-right: auto;
		
		box-shadow: inset 0rpx 2rpx 8rpx 0rpx rgba(255, 255, 255, 0.27);
	
		display: flex;
		align-items: center;
		padding-left: 28rpx;
		padding-right: 30rpx;

		.announce-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>